<!-- 出入库明细表 -->
<template>
  <div id="change">
    <div class="change-top">
      日期
      <el-date-picker style="width: 240px;" size="small" :unlink-panels="true" v-model="value1" type="daterange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      &nbsp; &nbsp;
      仓库
      <el-select size="small" style="width: 100px;">
        <el-option value="0">客户1</el-option>
        <el-option value="1">客户2</el-option>
      </el-select>
      &nbsp; &nbsp;
      类别
      <el-select size="small" style="width: 100px;">
        <el-option value="0">客户1</el-option>
        <el-option value="1">客户2</el-option>
      </el-select>
      &nbsp; &nbsp;
      商品
      <el-select size="small" style="width: 100px;">
        <el-option value="0">商品1</el-option>
        <el-option value="1">商品2</el-option>
      </el-select>
      &nbsp; &nbsp;
      销售人员
      <el-select size="small" style="width: 100px;">
        <el-option value="0">销售人员1</el-option>
        <el-option value="1">销售人员2</el-option>
      </el-select>
      <br>
      批次
      <el-input size="small" style="width: 100px;"></el-input>
      &nbsp; &nbsp;
      单据编号
      <el-input size="small" style="width: 100px;"></el-input>
      &nbsp; &nbsp;
      业务类型
      <el-select size="small" style="width: 100px;">
        <el-option value="0">销售人员1</el-option>
        <el-option value="1">销售人员2</el-option>
      </el-select>
      &nbsp; &nbsp;
      品牌
      <el-select size="small" style="width: 100px;">
        <el-option value="0">销售人员1</el-option>
        <el-option value="1">销售人员2</el-option>
      </el-select>
      <el-button size="small" style="margin-left: 10px;" type="primary">查询</el-button>
      <el-button size="small" type="primary">导出</el-button>

    </div>
    <div class="change-content">
      <hr>
      <h3 style="text-align: center;margin-bottom: 10px;margin-top: 10px;">批次跟踪表</h3>
      <span style="font-size: 13px;">日期：<font style="color: red;">xxxx-xx-xx</font> 至 <font style="color: red;">
          xxxx-xx-xx</font></span>
      <el-table
        :header-cell-style="{ fontSize: '14px', backgroundColor: '#f4f4f4', color: 'black', textAlign: 'center' }"
        show-summary :summary-method="getSummaries" height="450px" :data="tableData" border
        style="width: 100%;font-size: 13px;color:black;">
        <el-table-column prop="createDate" label="商品编号" width="170">
        </el-table-column>
        <el-table-column prop="code" label="商品名称" width="170">
        </el-table-column>
        <el-table-column prop="pid" label="单价" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="含税单价" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="金额" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="税额" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="价税合计" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="产地" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="品牌" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="单位" width="100">
        </el-table-column>
        <el-table-column prop="mid" label="仓库" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="批次" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="生产日期" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="保质期天数" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="有效期至" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="数量" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="单据编号" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="单据日期" width="100">
        </el-table-column>
        <el-table-column prop="pid" label="业务类型" width="120">
        </el-table-column>
        <el-table-column prop="pid" label="客户/供应商" width="140">
        </el-table-column>
        <el-table-column prop="pid" label="销售人员" width="120">
        </el-table-column>
        <el-table-column prop="aid" label="备注" width="140">
        </el-table-column>
      </el-table>
    </div>
    <el-pagination style="width: 400px; position: relative;left: 700px;top: 30px;" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
  </div>
</template>

<script>


export default {
  name: 'StoreTransDetails',
  data() {
    return {//分页参数
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      //新增对话框
      dialogFormVisible: false,
      switchValue: '1',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input: '',
      tableData: [{
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212'
      },
      {
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212'
      },
      {
        goodsId: '11111',
        code: "12121212",
        unit: '瓶',
        pid: '11',
        mid: '22',
        aid: '33',
        num: 100,
        outWid: '1121',
        inputWid: '121',
        aboutCode: '232323',
        remark: '',
        createDate: '2024-12-16',
        status: '1',
        state: '1212'
      },
      ],
      value1: '',
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    goto(to) {
      this.$router.push(to)
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === "num") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });

      return sums;
    }

  }

}
</script>

<style scoped>
#change {
  width: 100%;
  height: 100%;
}

.change-top {
  width: calc(100% -20px);
  /* height: 60px; */
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.change-content {
  width: 100%;
  height: calc(100% - 100px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ tbody tr:hover>td {
  background-color: #fff1d4 !important;
}

.change-content /deep/ .el-table td,
.change-content /deep/ .el-table th {
  border: 1px solid #e5e5e5;
}
</style>